<style>
	.print-format-preview {
        margin-top: 12px;
    }
	.letter-head {
		border-radius: 18px;
		background: #f8f8f8;
		padding: 12px;
		margin-left: 12px;
		margin-right: 12px;
	}
	.letterhead-container {
		width: 100%;
	}
	.letterhead-container .other-details {
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.logo-address {
		width: 65%;
		vertical-align: top;
	}

	.letter-head .logo {
		width: 90px;
		display: block;
		margin-bottom: 10px;
	}

	.letter-head .logo img {
		border-radius: 15px;
	}

	.company-name {
		color: #171717;
		font-weight: bold;
		line-height: 23px;
		margin-bottom: 5px;
	}

	.company-address {
		color: #171717;
		width: 300px;
	}

	.invoice-title {
		font-weight: bold;
	}

	.invoice-number {
		color: #7c7c7c;
	}

	.contact-title {
		color: #7c7c7c;
		width: 60px;
		display: inline-block;
		vertical-align: top;
		margin-right: 10px;
	}

	.contact-value {
		color: #171717;
		display: inline-block;
	}
	.letterhead-container td {
		padding: 0px !important;
		position: relative;
	}
</style>

<table class="letterhead-container">
	<tbody>
		<tr>
			<td class="logo-address">
				{% set company_logo = frappe.db.get_value("Company", doc.company, "company_logo") %} {% if
				company_logo %}
				<div class="logo">
					<img src="{{ frappe.utils.get_url(company_logo) }}" />
				</div>
				{% endif %}
				<div class="company-name">{{ doc.company }}</div>
				<div class="company-address">
					{% if doc.company_address %}
						{% set company_address = frappe.db.get_value("Address", doc.company_address, ["address_line1", "address_line2", "city", "state", "pincode", "country"], as_dict=True) %}
						{{ company_address.address_line1 or "" }}<br />
						{% if company_address.address_line2 %} {{ company_address.address_line2 }}<br /> {% endif %}
						{{ company_address.city or "" }}, {{ company_address.state or "" }}
						{{ company_address.pincode or "" }}, {{ company_address.country or ""}}<br />
					{% endif %}
				</div>
			</td>

			<td style="vertical-align: top">
				<div style="height: 90px; margin-bottom: 10px; text-align: right">
					<div class="invoice-title">{{ _("Sales Invoice") }}</div>
					<div class="invoice-number">{{ doc.name }}</div>
					<br />
				</div>
				<div style="text-align: left; float: right" class="other-details">
					{% set company_details = frappe.db.get_value("Company", doc.company, ["website", "email", "phone_no"], as_dict=True) %}
					{% if company_details.website %}
						<div>
							<span class="contact-title">{{ _("Website:") }}</span
							><span class="contact-value">{{ company_details.website }}</span>
						</div>
					{% endif %}
					{% if company_details.email %}
						<div>
							<span class="contact-title">{{ _("Email:") }}</span
							><span class="contact-value">{{ company_details.email }}</span>
						</div>
					{% endif %}
					{% if company_details.phone_no %}
						<div>
							<span class="contact-title">{{ _("Contact:") }}</span
							><span class="contact-value">{{ company_details.phone_no }}</span>
						</div>
					{% endif %}
				</div>
			</td>
		</tr>
	</tbody>
</table>
